<template>
    <div class="chat">
        <!-- 缩小化 -->
        <div class="small_chat" @click="minimizes = false;" v-show="minimizes && miniItems">
            <i class="font iconfont chat_handle">&#xebaf;</i>
        </div>

        <!-- 好友界面 -->
        <div class="chat_friend_interface chat_shodow" v-show="!minimizes">

            <!-- 好友界面头部 -->
            <div class="chat_friend_interface_head">
                <div class="head_top_info">
                    <span>青梧商城</span>
                    <font :class="isOnline?'green':'red'"></font>
                    <i class="font iconfont chat_handle" @click="minimizes = true">&#xeb9b;</i>
                </div>
                <div class="chat_friend_interface_head_desc">
                    该用户很懒，没留下任何描述~
                </div>
            </div>

            <!-- 分组好友和临时聊天列表Tab切换 -->
            <div class="chat_friend_interface_tab">
                <ul>
                    <li class="border_b_show">消息<div class="border_b"></div></li>
                    <li>联系人<div class="border_b"></div></li>
                </ul>
            </div>

            <!-- 好友的内容块 -->
            <div class="chat_friend_interface_content">
                <dl class="chat_handle">
                    <dt><img src="/pc/default_avatar.png" alt=""></dt>
                    <dd>青梧商城<span></span></dd>
                    <dd class="friend_new">青梧商城：[图片][图片][图片][图片][图片]</dd>
                </dl>
                <dl class="chat_handle">
                    <dt><img src="/pc/default_avatar.png" alt=""></dt>
                    <dd>青梧商城<span></span></dd>
                    <dd class="friend_new">青梧商城：[图片][图片][图片][图片][图片]</dd>
                </dl>
                <dl class="chat_handle">
                    <dt><img src="/pc/default_avatar.png" alt=""></dt>
                    <dd>青梧商城</dd>
                    <dd class="friend_new">青梧商城：[图片][图片][图片][图片][图片]</dd>
                </dl>
            </div>

            <!-- 聊天界面 -->
            <div class="chat_interface" v-if="onChat.length>0">
                <!-- 左侧显示聊天好友 -->
                <div class="chat_interface_left">
                    <dl class="active">
                        <dt><img src="/pc/default_avatar.png" alt=""></dt>
                        <dd>青梧商城</dd>
                        <dd class="close"><i class="icon iconfont">&#xebb2;</i></dd>
                    </dl>
                    <dl>
                        <dt><img src="/pc/default_avatar.png" alt=""></dt>
                        <dd>青梧商城</dd>
                        <dd class="close"><i class="icon iconfont">&#xebb2;</i></dd>
                    </dl>
                    <dl>
                        <dt><img src="/pc/default_avatar.png" alt=""></dt>
                        <dd>青梧商城</dd>
                        <dd class="close"><i class="icon iconfont">&#xebb2;</i></dd>
                    </dl>
                </div>
                <div class="chat_interface_right">
                    <div class="chat_interface_right_top">青梧商城<i class="icon iconfont chat_handle" @click="onChat = []">&#xebd2;</i></div>

                    <div class="chat_interface_right_content">
                        <div class="chat_interface_msg_item">
                            <div class="chat_interface_msg_avatar">
                                <img src="/pc/default_avatar.png" alt="">
                            </div>
                            <div class="chat_interface_msg_time"><span>青梧信息</span> 2019-05-12 12:01:12</div>
                            <div class="chat_interface_msg">
                                你好a<br>
                            </div>
                        </div>
                        <div class="chat_interface_msg_item me">
                            <div class="chat_interface_msg_avatar">
                                <img src="/pc/default_avatar.png" alt="">
                            </div>
                            <div class="chat_interface_msg_time"><span>青梧信息</span> 2019-05-12 12:01:12</div>
                            <div class="chat_interface_msg">
                                你好a<br>
                            </div>
                        </div>
                    </div>

                    <!-- 聊天输入框 -->
                    <div class="chat_interface_right_send">
                        <div class="chat_interface_right_send_tool">
                            <div class="tool_item chat_handle"><i class="icon iconfont">&#xeb96;</i></div>
                            <div class="tool_item chat_handle"><i class="icon iconfont">&#xebac;</i></div>
                            <div class="tool_item other_tool_item chat_handle"><i class="icon iconfont">&#xeb9d;</i>聊天记录</div>
                        </div>
                        <div class="chat_interface_right_send_text">
                            <textarea></textarea>
                        </div>
                        <div class="chat_interface_right_send_text_btn">
                            <button>发送消息(E)</button>
                            <button>关闭窗口(C)</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
export default {
    components: {},
    props: {
        minimize:{ // 最小化
            type:Boolean,
            default:true,
        },
        miniItem:{
            type:Boolean,
            default:false,
        },
        
    },
    data() {
      return {
          minimizes:this.minimize,
          miniItems:this.miniItem,
          webSocketLink:"ws://127.0.0.1:2346",
          socketObj:null,
          isOnline:false, // 是否链接上socket
          connect_info:{ // 用户信息，包括聊天好友信息
              id:0,
          }, 
          onChat:['大哥大'],
          sendMsg:{
              type:'text', // 类型
              content:'', // 内容
          },

      };
    },
    watch: {},
    computed: {},
    methods: {
        websocketInit:function(){
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socketObj = new WebSocket(this.webSocketLink)
                // 监听socket连接
                this.socketObj.onopen = this.open;
                // 监听socket错误信息
                this.socketObj.onerror = this.error;
                // 监听socket消息
                this.socketObj.onmessage = this.getMessage;
            }
        },
        open: function () {
            // eslint-disable-next-line no-console
            console.log("socket连接成功")

            // 如果登录了，且用户ID存在
            this.sendMsg.type == 'bind';
            this.sendMsg.content = this.connect_info.id;
            let infoStr = JSON.stringify(this.sendMsg);
            if(this.user_info.id>0){
                this.socketObj.send(infoStr); // 发送用户ID到服务器
                this.isOnline = true;
            }
        },
        error: function () {
            // eslint-disable-next-line no-console
            console.log("连接错误")
        },
        getMessage: function (msg) {

            let obj = JSON.parse(msg.data);

            if(obj == undefined){
                return;
            }
            // eslint-disable-next-line no-console
            console.log(obj)
            
            switch(obj.type){
                case 'text': // 文字接收
                    break;
                case 'image': // 图片接收
                    break;
            }
            
        },
        send: function () {
            this.socket.send(this.sendMsg);
        },
        close: function () {
            // eslint-disable-next-line no-console
            console.log("socket已经关闭")
        },
        // 获取用户链接信息，如果未登陆则跳转登录
        get_connect_info:function(){ 

        }
    },
    created() {
        this.websocketInit();
    },
    mounted() {},
    destroyed () {
        // 销毁监听
        // this.socket.onclose = this.close
    }
};
</script>
<style lang="scss" scoped>
.chat_interface{
    border-radius: 3px;
    .chat_interface_left{
        float: left;
        width: 200px;
        background: #333;
        height: 100%;
        border-radius: 3px 0 0 3px;
        dl{
            padding: 10px 0;
            clear: both;
            dt{
                width: 40px;
                height: 40px;
                img{
                    width: 100%;
                    height: 100%;
                }
                float: left;
                margin-right: 15px;
                margin-left: 15px;
            }
            dd{
                float: left;
                overflow: hidden;
                color:#999;
                line-height: 40px;
                height: 30px;
                width: 100px;
            }
            dd.close{
                float: right;
                width: 20px;
                height: 30px;
                margin-right: 5px;
                cursor:pointer;
                display: none;
            }
        }
        dl.active{
            background: #222;
            dd{
                color:#fff;
            }
        }
        dl:nth-child(1).active{
            border-radius: 3px 0 0 0;
        }
        dl:hover dd.close{
            display: block;
            color:#fff;
        }
        dl:after{
            content:'';
            clear:both;
            display: block;
        }
    }
    .chat_interface_right{
        float: right;
        width: 600px;;
        .chat_interface_right_top{
            background: #efefef;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            border-radius: 0 3px 0 0;
            i{
                float:right;
                margin-right: 15px;
            }
        }
        .chat_interface_right_content{
            height: 280px;
            .chat_interface_msg_item{
                padding: 15px 0 0 15px;
                .chat_interface_msg_avatar{
                    width: 40px;
                    height: 40px;
                    float: left;
                    margin-right: 15px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .chat_interface_msg_time{
                    font-size: 12px;
                    margin-top: 10px;
                    color:#666;
                    line-height: 20px;
                    span{
                        float: left;
                        font-size: 14px;
                        color:#333;
                        margin-right: 15px;
                        font-weight: bold;
                    }
                }
                .chat_interface_msg{
                    font-size: 12px;
                    line-height: 20px;
                    padding: 5px 8px;
                    background: #efefef;
                    border-radius: 5px;
                    margin-top: 10px;
                    display:inline-block;
                    min-width: 140px;
                }
            }
            .me{
                .chat_interface_msg_avatar{
                    float: right;
                }
                .chat_interface_msg_time{
                    float: right;
                    span{
                        float: right;
                        margin-left: 20px;
                    }
                }
                .chat_interface_msg{
                    background: #67C23A;
                    color:#fff;
                    float: right;
                    clear:both;
                    margin-right: 65px;
                    text-align: right;
                }
            }
        }
        .chat_interface_right_send{
            .chat_interface_right_send_tool{
                .tool_item{
                    line-height: 18px;
                    margin-left: 20px;
                    margin-top: 5px;
                    margin-bottom: 5px;
                    padding:4px 6px;
                    float: left;
                    border-radius: 3px;
                    i{
                        font-size: 18px;
                    }
                }
                .tool_item:hover{
                    background: #efefef;
                }
                .other_tool_item{
                    float:right;
                    margin-right: 15px;
                    font-size: 14px;
                    i{
                        margin-right: 10px;
                    }
                }
            }
            .chat_interface_right_send_tool:after{
                content:'';
                clear: both;
                display: block;
            }
            .chat_interface_right_send_text{
                height: 60px;
                textarea{
                    width: 100%;
                    height: 60px;
                    padding: 5px;
                    color:#666;
                    outline: none;
                    border:none;
                    box-sizing: border-box;
                }
            }
            .chat_interface_right_send_text_btn{
                button{
                    background: #fff;
                    border:1px solid #efefef;
                    border-radius: 3px;
                    float:right;
                    margin-right: 15px;
                    line-height: 25px;
                    margin-top: 5px;
                    outline: none;
                    cursor:pointer;
                }
                button:nth-child(1){
                    border: none;
                    background: #333;
                    color:#fff;
                }
                
            }
            border-top: 1px solid #efefef;
        }
    }
    width: 800px;
    height: 460px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 1005;
    position: fixed;
    left: 50%;
    top: 50%;
    background: #fff;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}
.chat_friend_interface_content{
    dl{
        padding: 15px 0 10px 0; 
        dt{
            width: 40px;
            height: 40px;
            display: blcok;
            float: left;
            margin-left: 15px;
            margin-right: 15px;
            img{
                border-radius: 50%;
                width: 100%;
                height: 100%;
            }
        }
        dd{
            float: left;
            width: 165px;
            line-height: 20px;
            height: 20px;
            font-size: 14px;
            display: block;
            position: relative;
            span{
                border-radius: 50%;
                background: #ca151e;
                color:#fff;
                width: 8px;
                height: 8px;
                position: absolute;
                right: 0px;
                z-index: 1001;
                top: -5px;
            }
        }
        dd.friend_new{
            color:#999;
            font-size: 12px;
            line-height: 16px;
            overflow: hidden;
            height: 16px;
            display: block;
        }
    }
    dl:hover{
        // background: #fcfcfc;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    dl:after{
        content:'';
        clear: both;
        display: block;
    }
}
.chat_friend_interface_tab{
    ul{
        border-bottom: 1px solid #efefef;
        li{
            float: left;
            width: 50%;
            text-align: center;
            line-height: 40px;
            color:#999;
            position: relative;
            .border_b{
                border-bottom: 1px solid #333;
                display: none;
                width: 80%;
                margin:0 auto;
                margin-bottom: -1px;
            }
        }
        li:hover{
            color: #333;
        }
        li.border_b_show{
            color:#333;
        }
        li.border_b_show .border_b{
            display: block;
        }
        
    }
    ul:after{
        content:'';
        clear: both;
        display: block;
    }
}
.small_chat{
    z-index: 1000;
    color:#ca151e;
    position: fixed;
    right: 40px;
    bottom: 90px;
    i{
        font-size: 50px;
    }
}
.chat_friend_interface{
    z-index: 1000;
    width: 260px;
    height: 520px;
    position: fixed;
    right: 0;
    bottom: 0;
    background: #fff;
    .chat_friend_interface_head{
        height: 80px;
        background: #333;
        color:#fff;
        .head_top_info{
            span{
                line-height: 50px;
                margin-left: 15px;
                float: left;
                height: 50;
                overflow: hidden;
                
            }
            font{
                float: left;    
                margin-top: 18px;  
                margin-left: 8px;  
            }
            i{
                float: right;
                line-height: 40px;
                margin-right: 10px;
            }
        }
        .head_top_info:after{
            content:'';
            clear: both;
            display: block;
        }
    }
    .chat_friend_interface_head_desc{
        font-size: 12px;
        color:#999;
        margin-left: 15px;
    }
}
.red{
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 50%;
    background: #ca151e;
}
.green{
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 50%;
    background: #67C23A;
}
.chat_shodow{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.chat_handle{
    cursor:pointer;
}

@font-face {
  font-family: 'iconfont';  /* project id 1617825 */
  src: url('//at.alicdn.com/t/font_1617825_5wjqc8ogtbk.eot');
  src: url('//at.alicdn.com/t/font_1617825_5wjqc8ogtbk.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1617825_5wjqc8ogtbk.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1617825_5wjqc8ogtbk.woff') format('woff'),
  url('//at.alicdn.com/t/font_1617825_5wjqc8ogtbk.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1617825_5wjqc8ogtbk.svg#iconfont') format('svg');
}
</style>